<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
	</body>
	<script>
		//命名空间单体对象
		var A = A || {};
		//模板渲染方法
		A.formatestring = function(str, data) {
			return str.replace(/\{#(\W+)#\}/g, function(match, key) {
				return typeof data[key] === undefined ? '' : data[key]
			});
		}
		//"有了这个方法，我们就可以通过简单模板来渲染出我们需求的视图了。
		//文字列表展示
		A.strategy = {
			'listPart': function(data) {
				var s = document.createElement("div"), // 模块容器
					ul = '', //列表字符串
					ldata = data.data.li, //列表数据
					//模块模板
					tpl = [
						'<h2> {#h2#} </h2>',
						'<p>{#p#}</p>',
						'<ul>{#ul#}</ul>'
					].join(''),
					//列表项模板
					liTpl = [
						'<li>',
						'<strong>{#strong#}</strong>',
						'<span>{#span#}</span>',
						'</li>'
					].join('');
				//有id设置模块id
				data.id && (s.id = data.id);
				//遍历列表数据
				for(var i = 0, len = ldata.length; i < len; i++) {
					//如果有列表项数据
					if(ldata[i].em || ldata[i].span) {
						//列表字符串追加一项列表项
						ul += A.formatestring(liTpl, ldata[i]);
					}
				}
				//装饰列表数据
				data.data.ul = ul;
				//渲染模块并插入模块中
				s.innerHTML = A.formatestring(tpl, data.data);
				//渲染模块
				A.root.appendchild(s);
			}
		}

		//模板生成器name:标识
		A.view = function(name) {
			//模板库
			var v = {
				//代码模板
				code: '<pre><code>{#code#}</code></pre>',
				//图片模板
				img: '<img src="{#src#}" alt="{#alt#}" title="{#title#}"/>',
				//带有id和类的模块模板
				part: '<div id="{#id#}" class="{#class#}"> {#part#} </div>',
				//组合模板
				theme: [
					'<div>',
					'<h1> {#title#}</h1>',
					'{#content#}',
					'</div>'
				].join('')
			}
			//如果参数是一个数组, 则返回多行模板 
			if(object.prototype.tostring.call(name) === "[object Array]") {
				//模板缓存器
				var tpl = '';
				//遍历标识
				for(var i = 0, len = name.length; i < len; i++) {
					//模板缓存器追加模板
					tpl += arguments.callee(name[i]);
				}
				//返回最终模板
				return tpl;
			} else {
				//如果模板库中有该模板则返回该模板，否则返回简易模板
				return v[name] ? v[name] : ('<' + name + '>{#' + name + '#}</' + name + '>');
			}
		}

		//最佳方案
		/*有了这个小型的模板生成器， 我们想获取一个模板就简单多了，
		比如我们想获取一个 '< span > {#span#} < /span>’就可以通过A.view('span')方式来获取。
		有了它，要想完成我们的需求就容易多了。*/
		//文字列表展示
		{
			'listPart': function(data) {
				//....
				//模块模板
				tpl = A.view(['h2', 'p', 'ul']),
					//列表项模板
					liTpl = A.formatestring(A.view('li'), {
							li: A.view['strong', 'span'])
					})),
		// ....
		}
	</script>

</html>